<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/filter.css">
    <style type="text/css">
        .filter{
            background-color: #f5f5f5;
            border: 1px solid #cacfd2;
        }
        .filter>div{
            margin: 0%;
        }
        .filter .leftfilter{
            float: left;
            padding: 0%;
        }
        .filter>div>ul{
            padding: 0%;
            margin: 0%;
        }
        .leftfilter>ul>li,.style>ul>li{
            display: inline-block;
        }
        .filter ul,.filter li{
            list-style:none;
            margin:0;
            padding:0;
        }
        .filter>div>ul>li>a{
            display: block;
            margin: 0%;
            border: 1px solid #cacfd2;
            color: #222f3d;
        }
        .filter>div>ul>li>a:hover{
            background-color: #ffffff;
            color: #2980b9;
        }
        .filter .style{
            float: right;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="classify">
        <div class="left-group pull-left">
            <button class="btn btn-classify">鸡</button>
            <button class="btn btn-classify selected">全部</button>
            <button class="btn btn-classify">已解决</button>
            <button class="btn btn-classify">未解决</button>
        </div>
        <div class="right-group pull-right">
            <button class="btn  btn-classify selected">
                <span class="glyphicon glyphicon-th-large"></span>
            </button>
            <button class="btn  btn-classify">
                <span class="glyphicon glyphicon-th-list"></span>
            </button>
        </div>
        <div class="clearfloat"></div>
    </div>
</div>

<div class="container">
    <div class="filter">
        <div class="leftfilter">
            <ul>
                <li><a href="#">全部分类</a></li>
                <li><a href="#">已解决</a></li>
                <li><a href="#">未解决</a></li>
            </ul>
        </div>
        <div class="style">
            <ul>
                <li><a href="#"><span class="glyphicon glyphicon-th-large"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-th-list"></span></a></li>
            </ul>
        </div>
        <div class="clearfloat"></div>
    </div>
</div>

</body>
<script type="text/javascript" src="../dist/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/filter.js"></script>
</html>
